﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Floodlight OpenFlow Controller - Firewall</title>
    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
    <!-- DataTables CSS -->
    <link href="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css"
          rel="stylesheet">
    <!-- DataTables Responsive CSS -->
    <link href="../bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- Animate.css -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" type="text/css"/>
    <link href="../bower_components/pnotify/css/pnotify.css" rel="stylesheet"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html" id="home-button-title">Floodlight OpenFlow Controller </a>
        </div>
        <!-- /.navbar-top-links -->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <nav id="navMenu"></nav>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">Firewall</h3>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">

            <div class="col-lg-6 col-md-12">
                <div class="panel" id="firewallStatusPanel">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i id="firewallStatusIcon"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <div class="huge" id="firewallStatus">...</div>
                                <div>Firewall Status <a href="#" class="btn btn-xs btn-default"
                                                        data-toggle="modal"
                                                        data-target="#status-modal">Change</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-12">
                <div class="panel panel-yellow">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-info fa-5x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <div class="huge" id="subnetMask">...</div>
                                <div>Subnet Mask <a href="#" class="btn btn-xs btn-default"
                                                    data-toggle="modal"
                                                    data-target="#subnet-modal">Change</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <!-- Small modal -->
        <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" id="status-modal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" id="roleModalCloseButton" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2">Change Firewall Status</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <div class="radio">
                                <label>
                                    <input type="radio" id="rbEnable" name="iCheck"> OPEN
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" id="rbDisable" name="iCheck"> CLOSE
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Cance</button>
                        <button type="button" id="btnChange" class="btn btn-xs btn-primary">Change</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Small modal -->
        <div class="modal fade modal-lg" tabindex="-1" role="dialog" id="subnet-modal" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" id="roleModalCloseButton2" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2">Change Subnet Mask</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="radio">
                                <label>
                                    <input type="text" id="tbSubnetMask"/>
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-xs btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" id="btnChangeSubnetMask" class="btn btn-xs btn-primary">Change</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <a href="#" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addRuleModal">Add New
                                                                                                           Rule</a>
            </div>
            <br/><br/>
        </div>

        <div class="row">

            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <i class="fa fa-table fa-fw"></i> Firewall Rules Table
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">

                        <table class="table table-bordered table-hover table-responsive responsive-utilities"
                               id="ruleTable" width="100%">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Switch</th>
                                <th>InPort</th>
                                <th>Source</th>
                                <th>Dest.</th>
                                <th>DL</th>
                                <th>Source IP</th>
                                <th>MaskBit</th>
                                <th>Dest. IP</th>
                                <th>MaskBit</th>
                                <th>Protocol</th>
                                <th>Source Port</th>
                                <th>Dest. Port</th>
                                <th>Pri.</th>
                                <th>Act.</th>
                                <th>Delete</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                    <!-- /.panel-body -->
                </div>
            </div>
        </div>

        <!-- Add Rule-->
        <div class="modal fade" tabindex="-1" id="addRuleModal" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" id="roleModalCloseButton2" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2">Create Rule</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Switch ID</label>
                            <input class="form-control" type="text" id="switchid" placeholder="Switch MAC address">

                            <label>Source Port</label>
                            <input class="form-control" type="text" id="src-inport" placeholder="Source port">

                            <label>Source MAC</label>
                            <input class="form-control" type="text" id="src-mac" placeholder="Source MAC address">

                            <label>Dest. MAC</label>
                            <input class="form-control" type="text" id="dst-mac" placeholder="Dest MAC address">

                            <label>Dl Type</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" id="rbARP" name="check2" checked="checked"/> ARP
                                </label>
                                <label>
                                    <input type="radio" id="rbIPV4" name="check2"> IPV4
                                </label>
                            </div>

                            <label>Source IPv4</label>
                            <input class="form-control" type="text" id="src-ip" placeholder="A.B.C.D/M">

                            <label>Dest. IPv4</label>
                            <input class="form-control" type="text" id="dst-ip" placeholder="A.B.C.D/M">

                            <label>Protocol</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" id="rbTCP" name="check3" checked="checked"/> TCP
                                </label>
                                <label>
                                    <input type="radio" id="rbUDP" name="check3"> UDP
                                </label>

                                <label>
                                    <input type="radio" id="rbICMP" name="check3"> ICMP
                                </label>
                            </div>

                            <label>Source TP</label>
                            <input class="form-control" type="text" id="tp-src" placeholder="Source Tp">

                            <label>Dest. TP</label>
                            <input class="form-control" type="text" id="tp-dst" placeholder="Dest Tp">

                            <label>Priority</label>
                            <input class="form-control" type="text" id="priority" placeholder="Priority">

                            <label>Action</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" id="rbAllow" name="check1" checked="checked"/> ALLOW
                                </label>
                                <label>
                                    <input type="radio" id="rbDeny" name="check1"> DENY
                                </label>
                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancel</button>
                        <button type="button" id="btnAddRule" class="btn btn-sm btn-primary">Create</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /#page-wrapper -->
    <div id="login-modal-include"></div>

</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>

<!-- PNotify -->
<script src="../bower_components/pnotify/pnotify.buttons.js"></script>
<script src="../bower_components/pnotify/pnotify.core.js"></script>
<script src="../bower_components/pnotify/pnotify.nonblock.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script src="../js/jquery.cookie.js"></script>

<script src="../js/querystringparser.js"></script>

<!-- Custom scripts to load in HTML -->
<script src="../js/navbar.js"></script>
<script>
    $(function () {
        $("#login-modal-include").load("loginmodal.html");
    });
</script>

<script>

    var ipaddress = $.cookie('cip');
    if (ipaddress == null || ipaddress == "") window.location.href = "login.html";
    var restport = $.cookie('cport');
    if (restport == null || restport == "") window.location.href = "login.html";

    GetStatus();
    GetSubnetMask();

    $("#btnChangeSubnetMask").click(function () {

        if ($("#tbSubnetMask").val() != "") {
            ChangeSubnetMask($("#tbSubnetMask").val());
        }
        else {
            new PNotify({
                title: 'Enter A Value!',
                text : 'Please enter a valid mask!',
                type : 'warning',
                hide : true
            });
        }
    });

    $("#btnChange").click(function () {

        if ($("#rbEnable").is(':checked')) {
            OpenFirewall();
        }

        else if ($("#rbDisable").is(':checked')) {
            CloseFirewall();
        }
        else {
            new PNotify({
                title: 'Change Status!',
                text : 'Please select status (OPEN / CLOSE) !',
                type : 'warning',
                hide : true
            });
        }
    });

    function GetStatus() {
        $.ajax({
            type    : "GET",
            dataType: 'json',
            url     : " http://" + ipaddress + ":" + restport + "/wm/firewall/module/status/json",

            success: function (data) {

                if (data["result"] == "firewall disabled") {
                    $("#firewallStatus").html("Passive");
                    $("#firewallStatusPanel").removeClass("panel-green");
                    $("#firewallStatusPanel").addClass("panel-red");
                    $("#firewallStatusIcon").removeClass("glyphicon glyphicon-ok fa-5x")
                    $("#firewallStatusIcon").addClass("glyphicon glyphicon-remove fa-5x");
                }
                else {
                    $("#firewallStatus").html("Active");
                    $("#firewallStatusPanel").removeClass("panel-red");
                    $("#firewallStatusIcon").removeClass("glyphicon glyphicon-remove fa-5x");
                    $("#firewallStatusPanel").addClass("panel-green");
                    $("#firewallStatusIcon").addClass("glyphicon glyphicon-ok fa-5x");
                }

                if (data["result"] == "firewall disabled")
                    $("#rbDisable").prop('checked', 'checked');
                else
                    $("#rbEnable").prop('checked', 'checked');

            },
            error  : function (jqXHR, textStatus, errorThrown) {
                alert('Error: ' + " " + jqXHR.responseText + " \n Status: " + textStatus + " \n Error Thrown: " + errorThrown);
            }
        });
    }

    function OpenFirewall() {
        $.ajax({
            type    : "PUT",
            dataType: 'json',
            url     : " http://" + ipaddress + ":" + restport + "/wm/firewall/module/enable/json",

            success: function (data) {

                new PNotify({
                    title: 'Firewall Status Changed',
                    text : 'Firewall is enabled.',
                    type : 'success',
                    hide : true
                });
                GetStatus();
                $("#roleModalCloseButton").click();
            },
            error  : function (jqXHR, textStatus, errorThrown) {
                alert('Error: ' + " " + jqXHR.responseText + " \n Status: " + textStatus + " \n Error Thrown: " + errorThrown);
            }
        });
    }

    function CloseFirewall() {
        $.ajax({
            type    : "PUT",
            dataType: 'json',
            url     : " http://" + ipaddress + ":" + restport + "/wm/firewall/module/disable/json",
            success : function (data) {

                new PNotify({
                    title: 'Firewall Status Changed',
                    text : 'Firewall is disabled.',
                    type : 'success',
                    hide : true
                });

                GetStatus();
                $("#roleModalCloseButton").click();
            },
            error   : function (jqXHR, textStatus, errorThrown) {
                alert('Error: ' + " " + jqXHR.responseText + " \n Status: "
                        + textStatus + " \n Error Thrown: " + errorThrown);
            }
        });
    }

    function ChangeSubnetMask(mask) {
        $.ajax({
            type    : "POST",
            dataType: 'json',
            url     : "http://" + ipaddress + ":" + restport + "/wm/firewall/module/subnet-mask/json",
            data    : '{"subnet-mask":' + "\"" + mask + "\"" + '}',
            success : function (data) {

                new PNotify({
                    title: 'Firewall Subnet Mask Changed',
                    text : 'New subnet mask is set.',
                    type : 'success',
                    hide : true
                });

                GetSubnetMask();

                $("#roleModalCloseButton2").click();
            },
            error   : function (jqXHR, textStatus, errorThrown) {
                alert('Error: ' + " " + jqXHR.responseText + " \n Status: " + textStatus + " \n Error Thrown: " + errorThrown);
            }
        });
    }

    function GetSubnetMask() {

        $.ajax({
            type    : "GET",
            dataType: 'json',
            url     : "http://" + ipaddress + ":" + restport + "/wm/firewall/module/subnet-mask/json",
            success : function (data) {
                $("#subnetMask").html(data["subnet-mask"]);
            },
            error   : function (jqXHR, textStatus, errorThrown) {
                alert('Error: ' + " " + jqXHR.responseText + " \n Status: " + textStatus + " \n Error Thrown: " + errorThrown);
            }
        });
    }

    $("#btnAddRule").click(function () {

        var switchid = $("#switchid").val();
        var src_inport = $("#src-inport").val();
        var src_mac = $("#src-mac").val();
        var dst_mac = $("#dst-mac").val();
        var dl_type = "";
        if ($("#rbARP").is(':checked')) dl_type = "ARP";
        else dl_type = "IPV4";

        var nw_proto = "";

        if ($("#rbTCP").is(':checked')) nw_proto = "TCP";
        else if ($("#rbUDP").is(':checked')) nw_proto = "UDP";
        else nw_proto = "ICMP";

        var tp_src = $("#tp-src").val();
        var tp_dst = $("#tp-dst").val();
        var priority = $("#priority").val();
        var dst_ip = $("#dst-ip").val();
        var src_ip = $("#src-ip").val();

        var action = "";
        if ($("#rbDeny").is(':checked')) action = "DENY";
        else action = "ALLOW";

        if (switchid != "" || src_inport != "" || src_mac != "" || dst_mac != "" || dl_type != "" || nw_proto != "" || tp_src != "" || tp_dst != "" || priority != "" || dst_ip != "" || src_ip != "" || action != "") {

            AddFirewallRule(switchid, src_inport, src_mac, dst_mac, dl_type, nw_proto, tp_src, tp_dst, priority, dst_ip, src_ip, action);

        }
        else {

            new PNotify({
                title: 'Enter a value !',
                text : 'Please enter a valid value!',
                type : 'warning',
                hide : true
            });
        }
    });

    function AddFirewallRule(switchid, src_inport, src_mac, dst_mac, dl_type, nw_proto, tp_src, tp_dst, priority, dst_ip, src_ip, action) {
        var postData = "";
        postData = '{ "switchid":' + "\"" + switchid + "\""
                + ',"src-inport" :' + "\"" + src_inport + "\""
                + ',"src-mac" :' + "\"" + src_mac + "\""
                + ',"dst-mac" :' + "\"" + dst_mac + "\""
                + ',"dl-type":' + "\"" + dl_type + "\""
                + ',"nw-proto": ' + "\"" + nw_proto + "\""
                + ',"tp-src" : ' + "\"" + tp_src + "\""
                + ',"tp-dst": ' + "\"" + tp_dst + "\""
                + ',"priority": ' + "\"" + priority + "\""
                + ',"dst-ip": ' + "\"" + dst_ip + "\""
                + ',"src-ip": ' + "\"" + src_ip + "\""
                + ',"action": ' + "\"" + action + "\"" + '}';

        $.ajax({
            type    : "POST",
            dataType: 'json',
            url     : "http://" + ipaddress + ":" + restport + "/wm/firewall/rules/json",
            data    : postData,
            success : function (data) {

                if (data["status"] == "Rule added") {
                    new PNotify({
                        title: 'Rule is added!',
                        text : 'New rule is successfully added.',
                        type : 'success',
                        hide : true
                    });

                    GetRules();
                }
                else {

                    new PNotify({
                        title: 'Error Occured.',
                        text : data["status"],
                        type : 'error',
                        hide : true
                    });
                }

            },
            error   : function (jqXHR, textStatus, errorThrown) {
                alert('Error: ' + " " + jqXHR.responseText + " \n Status: " + textStatus + " \n Error Thrown: " + errorThrown);
            }
        });

    }

    GetRules();

    function GetRules() {

        var url = "http://" + ipaddress + ":" + restport + "/wm/firewall/rules/json";

        $(document).ready(function () {

            $('#ruleTable').DataTable().destroy();

            $('#ruleTable').DataTable({
                responsive  : true,
                lengthChange: false,
                searching: false,
                scrollX: true,
                paging: false,
                ajax        : {
                    url    : url,
                    dataSrc: ''
                },
                "columnDefs": [
                    {
                        // The `data` parameter refers to the data for the cell (defined by the
                        // `data` option, which defaults to the column being worked with, in
                        // this case `data: 0`.
                        "render" : function (data, type, row) {
                            return "<a class='btn btn-xs btn-danger' onclick='DeleteRule(" + data + ")' >Delete</<a>";
                        },
                        "targets": 15
                    }

                ],
                columns     : [
                    {data: 'ruleid'},
                    {data: 'dpid'},
                    {data: 'in_port'},
                    {data: 'dl_src'},
                    {data: 'dl_dst'},
                    {data: 'dl_type'},
                    {data: 'nw_src_prefix'},
                    {data: 'nw_src_maskbits'},
                    {data: 'nw_dst_prefix'},
                    {data: 'nw_dst_maskbits'},
                    {data: 'nw_proto'},
                    {data: 'tp_src'},
                    {data: 'tp_dst'},
                    {data: 'priority'},
                    {data: 'action'},
                    {data: 'ruleid'},
                ]
            });

        });

    }

    function DeleteRule(ruleId) {

        if (confirm("Rule will be deleted. To continue press 'OK'!")) {

            $.ajax({
                type    : "DELETE",
                dataType: 'json',
                url     : "http://" + ipaddress + ":" + restport + "/wm/firewall/rules/json",
                data    : '{ "ruleid":' + "\"" + ruleId + "\"" + '}',
                success : function (data) {

                    new PNotify({
                        title: 'Rule deleted!',
                        text : 'Rule is successfully deleted.',
                        type : 'success',
                        hide : true
                    });

                    GetRules();

                },
                error   : function (jqXHR, textStatus, errorThrown) {
                    alert('Error: ' + " " + jqXHR.responseText + " \n Status: "
                            + textStatus + " \n Error Thrown: " + errorThrown);
                }
            });
        }

    }

</script>
</body>
</html>
